<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05 双向绑定</title>
</head>

<body>
    <!-- 视图层 -->
    <div id="app">
        <!-- 1.双向绑定是和表单一起运用的 -->

        <!-- 文本框 -->
        姓名： <input type="text" name="" id="" v-model="name"> <br>
        <!-- 单选框 -->
        性别：
        <input type="radio" name="" id="" value="man" v-model="gender"> 男
        <input type="radio" name="" id="" value="women" v-model="gender"> 女 <br>
        <!-- 复选框 -->
        爱好：
        <input type="checkbox" name="" value="l" id="" v-model="likes">篮球
        <input type="checkbox" name="" value="z" id="" v-model="likes">足球
        <input type="checkbox" name="" value="y" id="" v-model="likes">羽毛球 <br>
        <!-- 下拉菜单 -->
        城市：
        <select name="" id="" v-model="mycity">
            <option :value="item.value" v-for="(item, index) in citys">{{item.name}}</option>
            <!-- <option value="">珠海</option>
            <option value="">湛江</option>
            <option value="">江门</option>
            <option value="">潮汕</option> -->
        </select> <br>
        <!-- 文本域 -->
        备注：
        <textarea name="" id="" cols="30" rows="10" v-model="inf"></textarea> <br>
        <!-- 提交按钮 -->
        <input type="button" value="提交" @click="reg">
        <!-- 重置按钮 -->
        <input type="reset" value="重置">
    </div>
</body>
<script src="./vue.js"></script>
<script>
    // 数据层
    new Vue({
        el: '#app',
        data: {
            name: '',
            gender: 'women', //默认值是女
            likes: ['l', 'z'], //默认值是篮球，足球
            citys: [{
                name: '广州',
                value: 'gz'
            }, {
                name: '湛江',
                value: 'zj'
            }, {
                name: '江门',
                value: 'jm'
            }, {
                name: '珠海',
                value: 'zh'
            }, {
                name: '潮汕',
                value: 'cs'
            }, {
                name: '化州',
                value: 'hz'
            }],
            mycity: 'zh',
            inf: ''

        },
        methods: {
            reg() {
                //点击提交的时候，这里应该拿到所有的数据，发给后端开发
                let datalist = {
                    name: this.name,
                    gender: this.gender,
                    mycity: this.mycity,
                    inf: this.inf
                }

                console.log(datalist, '拿到的数据都在这里')
            }
        }
    })
</script>

</html>